<template>
  <div class="wrapper">
    <el-row :gutter="10" style="margin-top:30px">
      <el-col :xs="22" :lg="22" :offset="2" style="padding:40px;position:relative">
        <div class="editTitle">发表课评</div>
        <h4 class="editTitle_01">{{title}}</h4>
        <div class="plus">
          总分:
          <span>{{plus}}</span>
        </div>
        <div>
          <span class="edit_span">总体</span>
          <el-rate
            v-model="stars.all"
            :max="stars.max"
            allow-half
            show-score
            style="display:inline-block"
          ></el-rate>
        </div>
        <div>
          <span class="edit_span">逻辑性：</span>
          <el-rate
            v-model="stars.logic"
            :max="stars.max"
            allow-half
            show-score
            style="display:inline-block"
          ></el-rate>
        </div>
        <div>
          <span class="edit_span">实用性：</span>
          <el-rate
            v-model="stars.easyuse"
            :max="stars.max"
            show-score
            allow-half
            style="display:inline-block"
          ></el-rate>
        </div>
        <div>
          <span class="edit_span">易学性:</span>
          <el-rate
            v-model="stars.practical"
            :max="stars.max"
            allow-half
            show-score
            style="display:inline-block"
          ></el-rate>
        </div>
        <div style="margin-top:20px;">
          <Editor id="tinymce" v-model="tinymceHtml" :init="editorInit"></Editor>
        </div>
        <div v-if="msg" class="approvemsg">{{msg}}</div>
      </el-col>
      <el-col :xs="22" :lg="22" :offset="2" style="padding:0px 40px;text-align:center">
        <el-button
          type="primary"
          @click="submit"
          :disabled="!tinymceHtml"
          style="width:300px;background-color:orange"
        >发表</el-button>
      </el-col>
      <el-col :xs="22" :lg="22" :offset="2"></el-col>
    </el-row>
  </div>
</template>

<script>
import { getNavList, postCourseComment } from "@/api/ajax";
import axios from "axios";
import tinymce from "tinymce/tinymce";
import "tinymce/themes/modern/theme";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
export default {
  name: "editComments",
  data() {
    return {
      datas: "",
      tinymceHtml: "",
      content1: "",
      length: 0,
      title: "",
      item: {},
      stars: {
        text: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
        max: 5,
        all: null,
        logic: null,
        easyuse: null,
        practical: null
      },
      nope: [],
      bread: [],
      editorInit: {
        language_url: "/static/skins/zh_CN.js",
        placeholder: "请编辑课评",
        images_upload_url: "upload/a/h/api/common/upload",
        automatic_uploads: false,
        images_upload_handler: function(blobInfo, success, failure) {
          var xhr, formData;
          xhr = new XMLHttpRequest();
          xhr.withCredentials = true;
          xhr.open("POST", "upload/a/h/api/common/upload");

          xhr.onload = function() {
            var json;

            if (xhr.status != 200) {
              failure("HTTP Error: " + xhr.status);
              return;
            }

            json = JSON.parse(xhr.responseText);
            if (!json || typeof json.data != "string") {
              failure("Invalid JSON: " + xhr.responseText);
              return;
            }

            success(json.data);
          };

          formData = new FormData();
          formData.append("file", blobInfo.blob(), blobInfo.filename());

          xhr.send(formData);
        },
        language: "zh_CN",
        skin_url: "/static/skins/lightgray",
        height: 300,
        theme: "modern",
        width: 1200,
        resize: "both",
        plugins:
          "link lists image code table colorpicker textcolor contextmenu",
        toolbar:
          "bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat",
        branding: false
      }
    };
  },
  components: {
    Editor
  },
  computed: {
    plus: function() {
      return (
        (this.stars.all +
          this.stars.logic +
          this.stars.easyuse +
          this.stars.practical) /
        4
      );
    },
    msg: function() {
      if (this.length > 0 && this.length < 15) {
        let tempnum = 15 - this.length;
        return `加油！还差${tempnum}个字！`;
      } else if (this.length >= 15 && this.length < 85) {
        let tempnum = 100 - this.length;
        return `再加${tempnum}字，1张图片即有机会成为优质课评，获取课程奖励！`;
      }
    }
  },
  watch: {
    tinymceHtml(val) {
      var re1 = new RegExp("<.+?>", "g");
      this.length = val.replace(re1, "").length;
    }
  },
  methods: {
    contentUe(value) {
      this.content1 = value; //富文本中的内容
    },
    wentback() {
      this.$router.go(-1);
    },
    handleTo() {},
    submit() {
      let params = {};
      let headers = {
        "Content-Type": "application/json"
      };
      if (localStorage.getItem("token")) {
        headers.token = localStorage.getItem("token");
      }
      if (!this.stars.all) {
        this.$message({
          showClose: true,
          message: "请对总分进行评分",
          duration: 2000,
          type: "error"
        });
        return;
      }
      if (!this.stars.logic) {
        this.$message({
          showClose: true,
          message: "请对逻辑性进行评分",
          duration: 2000,
          type: "error"
        });
        return;
      }
      if (!this.stars.practical) {
        this.$message({
          showClose: true,
          message: "请对实用性进行评分",
          duration: 2000,
          type: "error"
        });
        return;
      }
      if (!this.stars.easyuse) {
        this.$message({
          showClose: true,
          message: "请对易学性进行评分",
          duration: 2000,
          type: "error"
        });
        return;
      }
      if (!this.tinymceHtml) {
        this.$message({
          showClose: true,
          message: "请输入课评内容",
          duration: 2000,
          type: "error"
        });
        return;
      }
      if (this.length < 15) {
        this.$message({
          showClose: true,
          message: "课评太短啦，请至少输入15个字以上罢",
          duration: 2000,
          type: "error"
        });
        return;
      }
      params.courseId = this.$route.query.id;
      params.content = tinyMCE.activeEditor.getContent();
      params.learnability = this.stars.easyuse * 2;
      params.logicality = this.stars.logic * 2;
      params.practicability = this.stars.practical * 2;
      params.score = this.plus * 2;
      axios({
        method: "post",
        url: "account/a/h/api/coursecomment",
        data: params,
        headers: headers
      }).then(res => {
        if (res.data.code == 0) {
          this.$router.go(-1);
        } else {
          this.$message.error(`${res.data.msg}`);
        }
      });
    }
  },
  mounted() {
    tinymce.init({});
    this.handleTo();
  }
};
</script>

<style lang="less" scoped>
@import "~styles/z.less";
@import "~styles/css3.less";
@import "~styles/variables.less";
.wrapper {
  background: white;
  margin-bottom: 100px;
  /deep/ .ql-editor .ql-blank {
    height: 350px;
  }
  .plus {
    font-size: 40px;
    font-weight: bold;
    .abs;
    right: 190px;
    & span {
      color: orange;
    }
  }
  .editTitle {
    .MainFont;
    margin: 20px 0;
  }
  .editTitle_01 {
    .secondFont;
    margin: 10px 0;
  }
  .edit_span {
    display: inline-block;
    width: 80px;
    margin-right: 2px;
  }
  .approvemsg {
    color: orange;
    float: right;
    margin: 20px 150px 0 0;
  }
}
</style>
